<template>
	<view class="add-Address">
	<headerNavbarVue :title='title'></headerNavbarVue>
		<view class="add-from">
			<view class="form-item">
				<text class="label">收货人</text>
				<input v-model="AddressForm.consignee" placeholder="收货人姓名" placeholder-class="placeholderStyle" />
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<input v-model="AddressForm.address_phone" placeholder="收货人手机号" type="number" placeholder-class="placeholderStyle" />
			</view>
			<view class="form-item" @click="chooseLocation">
				<text class="label">所在地区</text>
				<input v-model="AddressForm.address_area" type="text" disabled="true" placeholder="请选择所在地区" placeholder-class="placeholderStyle" />
			</view>
			<view class="form-item">
				<text class="label">详细地址</text>
				<input v-model="AddressForm.address_content" placeholder="街道、门牌号等" placeholder-class="placeholderStyle" />
			</view>
			<view class="default-switch">
				<text class="label">设为默认</text>
				<switch :value="AddressForm.if_default" :checked="AddressForm.if_default === 0" :disabled="isdisabled" @change="SwitchChange"  color="#000" style="transform:scale(0.7)" />
			</view>
		</view>
		<FooterButtonVue butText="保存" @click="addsubmitForm" v-if="title=='添加地址'"></FooterButtonVue>
		<FooterButtonVue butText="确认修改" @click="putAddressForm" v-else></FooterButtonVue>
	</view>
</template>

<script setup>
	import headerNavbarVue from '@/components/headerNavbar.vue';
	import FooterButtonVue from './components/FooterButton.vue';
	import { ref } from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	import {getAddress, addAddress,putAddress } from '@/config/API/address.js';
	
	const title = ref()
	const isdisabled = ref(false)
	const userID = ref(uni.getStorageSync('userInfo').id)
	// 表单数据
	const AddressForm = ref({
		consignee: '',
		address_phone: '',
		address_area: '',
		address_content: '',
		if_default: 1,
		user_id: userID.value 
	});
	onLoad(async (option) => {
		console.log('option',option);
		const res = await getAddress(userID.value);
		if(option.address_id && option.address_id !== 'undefined' && option.userid && option.userid !== 'undefined'){
			title.value = '修改地址'
			isdisabled.value = false
			const address = res.data.find(item => item.address_id == option.address_id);
			if (address) {
				AddressForm.value = { ...AddressForm.value, ...address };
				console.log('AddressForm.value',AddressForm.value);
				if(AddressForm.value.if_default == 0){
					isdisabled.value = true
				}
			} else {
				console.log('没有地址数据');
			}
		} else {
			title.value = '添加地址'
			isdisabled.value = false
			if (res.data == null) {
				AddressForm.value.if_default = 0;  
				isdisabled.value = true
			}
		}
	});

	// 选择所在地区
	const chooseLocation = () => {
		uni.chooseLocation({
			success: (res) => {
				AddressForm.value.address_area = res.address; 
			},
			fail: (e) => {
				console.log("报错",e);
			},
		});
	};
	
	// 默认开关
	const SwitchChange = () => {
		AddressForm.value.if_default = AddressForm.value.if_default == 1 ? 0 : 1;
		console.log('AddressForm.value.if_default', AddressForm.value.if_default);
	};

	// 提交修改表单
	const putAddressForm = async () => {
		if (!AddressForm.value.consignee || !AddressForm.value.address_phone || !AddressForm.value.address_area || !AddressForm.value.address_content) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			});
			return;
		}

		try {
			const res = await putAddress(AddressForm.value);
			if (res.code === 200) {
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				});
				uni.navigateBack();
			} else {
				uni.showToast({
					title: '修改失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('修改地址失败:', error);
			uni.showToast({
				title: '修改失败，请稍后再试',
				icon: 'none'
			});
		}
	};
	
	// 提交添加表单
	const addsubmitForm = async () => {
		if (!AddressForm.value.consignee || !AddressForm.value.address_phone || !AddressForm.value.address_area || !AddressForm.value.address_content) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			});
			return;
		}
		try {
			const res = await addAddress(AddressForm.value);
			if (res.code === 200) {
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
				uni.navigateBack();
			} else {
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('添加地址失败:', error);
			uni.showToast({
				title: '添加失败，请稍后再试',
				icon: 'none'
			});
		}
	};
</script>

<style lang="scss" scoped>
	.add-Address {
		width: 100%;
		min-height: 100vh;
		padding: 10rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;
		.add-from {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			.form-item {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: safe;
				padding: 20rpx 0;
				
				.label {
					width: 150rpx;
					max-width: 200rpx;
					font-size: 28rpx;
					color: #333;
				}
				input {
					padding: 20rpx 20rpx 20rpx 0rpx;
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 1px solid #eaeaea;
				}
			}
			.default-switch {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.label {
					width: 150rpx;
					max-width: 200rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
</style>

<style scoped>
/deep/.placeholderStyle{
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(193, 193, 193, 1);
}
</style>